<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam.params"
              @on-search="search"
              @on-reset="onReset"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :toolbar="state.toolbar"
            :param="state.param"
            :pagination="pagination"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <save
      v-if="state.visibleSave"
      :itemId="state.itemId"
      :visible="state.visibleSave"
      @close="handleClose"
    ></save>
  </page-layout>
</template>

<script>
import { message, modal } from "ant-design-vue";
import { filterEmptyByObject } from '@/tools/common'
import { page, remove } from "@/api/module/term-manage";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { reactive, createVNode, ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import save from "./modal/save.vue";
import moment from 'moment'
import dictEnum from "@/const/dict";
import { getDictByCodesReturnObj } from "@/tools/get-dict";

const removeKey = "remove";

export default {
  name: 'term-manage',
  components: {
    save,
  },
  setup() {
    const { t } = useI18n();
    const tableRef = ref();

    const columns = [
      {
        title: "学年",
        dataIndex: "semesterName",
        key: "semesterName",
      },
      {
        title: "季度",
        dataIndex: "quarter",
        key: "quarter",
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.QUARTER]
            ? dictLists.data[dictEnum.QUARTER].find((v) => v.value == data)
            : {};
          return item ? item.label : "";
        },
      },
      {
        title: "创建人",
        dataIndex: "createBy",
        key: "createBy",
      },
    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      let response = await page(param);
      return {
        data: response.data.record,
        total: response.data.total,
      };
    };

    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: "您是否确定要删除此数据?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk() {
          message.loading({ content: "提交中...", key: removeKey });
          remove({ id: record.id }).then((response) => {
            if (response.success) {
              message
                .success({ content: "删除成功", key: removeKey, duration: 1 })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: "删除失败",
                key: removeKey,
                duration: 1,
              });
            }
          });
        },
      });
    };

    /// 行操作
    const operate = [
      { label: "编辑", event: function ({ id }) {
        state.visibleSave = true
        state.itemId = id
      } },
      {
        code: 'term-manage:remove',
        label: t("button.delete"),
        event: function (record) {
          removeMethod(record);
        },
      },
    ];

    const pagination = {
      pageNum: 1,
      pageSize: 10,
    };

    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      toolbar: [
        {
          code: "term-manage:add",
          label: t("button.newly"),
          type: "primary",
          event: (selectedRowKeys) => {
            handleAdd();
          },
        },
      ],
      itemId: "",
    });

    const searchParam = reactive({
      params: [],
    });

    const search = function (value) {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(value),
      };
    };
    const onReset = function () {
      state.param = {};
    };

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const handleAdd = () => {
      state.visibleSave = true;
    };
    const handleClose = (value) => {
      state.visibleSave = false;
      tableRef.value.reload();
    };
    const dictLists = reactive({
      data: {}
    })
    onMounted(async () => {
      dictLists.data = await getDictByCodesReturnObj([
        dictEnum.QUARTER, // 季度
      ]);
      searchParam.params = [
        {
          key: "semesterName",
          type: "input",
          label: "学年",
          placeholder: "请输入学年",
        },
        {
          key: "quarter",
          type: "select",
          label: "季度",
          placeholder: "请输入季度",
          options: dictLists.data[dictEnum.QUARTER]
        },
      ]
    })
    return {
      t,
      state,
      fetch,
      search,
      onReset,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,
      handleClose,

      handleAdd,
      tableRef,
    };
  },
};
</script>
